<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <p>
        <input type="text" v-model="messge">
        {{messge}}
    </p>

    <section>
        选择性别：{{sex}}
        <label>
            <input type="radio" value="男" v-model="sex"> 男
        </label>
        <label>
            <input type="radio" value="女" v-model="sex"> 女
        </label>
    </section>

    <section>
        <label>
            同意协议： <input type="checkbox" v-model="agree">
            {{agree}}
        </label>
        <button :disabled="!agree">下一步</button>
    </section>

    <section>
        爱好：
        <label>
            <input type="checkbox" value="篮球" v-model="hobby">篮球
        </label>
        <label>
            <input type="checkbox" value="足球" v-model="hobby">足球
        </label>
        <label>
            <input type="checkbox" value="羽毛球" v-model="hobby">羽毛球
        </label>
        {{hobby}}
    </section>

    <section>
        爱好2：
        <label v-for="item in hobby2" :for="item">
            <input type="checkbox" :value="item" :id="item" v-model="hobby">{{item}}
        </label>

        {{hobby2}}
    </section>

    <section>
        你爱吃（单选：
        <select name="" v-model="friut">
            <option value="香蕉">香蕉</option>
            <option value="苹果">苹果</option>
            <option value="橘子">橘子</option>
        </select>
        {{friut}}
    </section>

    <section>
        你爱吃（多选：
        <select name="" v-model="friuts" multiple>
            <option value="香蕉">香蕉</option>
            <option value="苹果">苹果</option>
            <option value="橘子">橘子</option>
        </select>
        {{friuts}}
    </section>

    <section>
        lazy 懒加载
        <input type="text" v-model.lazy="lazy">
        {{lazy}}
        <br>
        number
        <input type="number" v-model.number="number">
        {{number}} -- {{typeof number}}
        <br>
        trim
        <input type="text" v-model.trim="trim">
        输入的是{{trim}}
    </section>

</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      messge: '这是信息',
      sex: '',
      agree: false, //单选框 布尔值
      hobby: ['足球'], //多选框数组,
      hobby2: ['吃', '喝', '玩', '乐'],
      friut: '苹果',
      friuts: ['苹果'],
      lazy: 'lazy',
      number: 0,
      trim: ''
    }
  })
</script>

</body>
</html>